<template>
	<div class="files-table-wrap">
		<div class="content">
			<div class="c-item" :class="{'selected':hasCheck(item.id)}" v-for="item in list" :key="item.id" @click="tableItemClick(item)">
				<div class="c-item-cover"></div>
				<i class="iconfont icon-uncheck"></i>
				<i class="iconfont icon-checked"></i>
                <img :alt="item.name" :title="item.name" :src="item.coverPath?item.coverPath:defaultImg" width="100%" height="auto" v-if="item.cid*1===1" />
                <img :alt="item.name" :title="item.name" :src="item.coverPath?item.coverPath:defaultImg" width="100%" height="auto" v-if="item.cid*1===3" />
				<img :alt="item.name" :title="item.name" :src="cid*1===2?item.thumbPath:defaultImg" width="100%" height="auto" v-else />
				<span class="txt-el" :title="item.name">{{item.name}}</span>
			</div>
		</div>
		<div class="pager">
			<div class="xzqbText" @click="quanxuanBtn">选择全部</div>
			<el-pagination :current-page="currPage" :page-size="pageSize" layout="prev, pager, next, jumper" :total="totalCount" @current-change="handleCurrentChange" background />
		</div>
		<div class="footer">
			<div class="title">已选</div>
			<el-scrollbar>
				<div class="content">
					<div class="c-item" v-for="item in _selectedList" :key="item.id">
						<img :src="item.coverPath?item.coverPath:defaultImg" width="100%" height="auto" v-if="item.cid*1===1" />
                        <img :src="item.coverPath?item.coverPath:defaultImg" width="100%" height="auto" v-if="item.cid*1===3" />
						<img :src="cid*1===2?item.thumbPath:defaultImg" width="100%" height="auto" v-else />
						<span>{{item.name}}</span>
					</div>
				</div>
			</el-scrollbar>
		</div>
	</div>
</template>

<script>
	import { mapState, mapMutations, mapActions } from 'vuex'
	export default {
		name: 'files-table',
		data() {
			return {}
		},
        watch:{
            list:{
                deep: true,
                immediate: true,
                handler(val){
                    val.forEach((item,index)=>{
                        if(item.cid=='3'){
                            let fileFormat = item.name.split('.')[1];
                            switch(fileFormat){
                                case '.doc':
                                    item.coverPath = './static/pic/doc.png';
                                    break;
                                case 'docx':
                                    item.coverPath = './static/pic/docx.png';
                                    break;
                                case 'pdf':
                                    item.coverPath = './static/pic/pdf.png';
                                    break;
                                case 'ppt':
                                    item.coverPath = './static/pic/ppt.png';
                                    break;
                                case 'pptx':
                                    item.coverPath = './static/pic/pptx.png';
                                    break;
                                case 'rtf':
                                    item.coverPath = './static/pic/rtf.png';
                                    break;
                                case 'txt':
                                    item.coverPath = './static/pic/txt.png';
                                    break;
                                case 'xls':
                                    item.coverPath = './static/pic/xls.png';
                                    break;
                                case 'xlsx':
                                    item.coverPath = './static/pic/xlsx.png';
                                    break;
                            }
                        }
                        console.log(item);
                    })
                }
            }
        },
		computed: {
			...mapState('material', ['currPage', 'totalPage', 'totalCount', 'pageSize', 'list', 'selectedList', 'cid', 'scenes']),
			defaultImg() {
				let {
					cid
				} = this
				cid = cid * 1
				switch(cid) {
					case 1:
						return './static/img/img-video.png'
					case 3:
						return './static/img/img-doc.png'
					case 4:
						return './static/img/img-audio.png'
					case 5:
						return './static/img/img-gif.png'
					case 6:
						return './static/img/img-app.png'
					default:
						return ''
				}
			},
			_selectedList() {
				const {
					selectedList
				} = this
				let res = []
				Object.keys(selectedList).forEach(k => {
                    console.log(selectedList[k])
					res.push(selectedList[k])
				})
				return res.sort((a, b) => (a.tmp - b.tmp))
			}
		},
		mounted() {

		},
		methods: {
			...mapMutations('material', ['toggleSelected', 'updatePageSize']),
			...mapActions('material', ['getMutations']),
			quanxuanBtn(){

				for(let i=0,list_len=this.list.length;i<list_len;i++){
					this.toggleSelected(this.list[i]);
				}
			},
			hasCheck(id) {
				const keys = Object.keys(this.selectedList)
				const idx = keys.findIndex(k => {
					return k * 1 === id * 1
				})
				return idx !== -1
			},
			tableItemClick(item) {
				this.toggleSelected(item)
			},
			handleCurrentChange(e) {
				this.updatePageSize(e);
				this.getMutations();
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../assets/scss/variables';
	.files-table-wrap {
		display: flex;
		flex-direction: column;
		background: #ffffff;
		border: 1px solid #dcdee2;
		border-bottom: none;
		width: 100%;
		height: 500px;
		padding: 16px 0 0 0;
		position: relative;
		.xzqbText{
			color :#409EFF;
			margin-left:1%;
			cursor:pointer;
		}
		.content {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: flex-start;
			flex: 2;
		}
		.c-item {
			display: flex;
			flex-direction: column;
			position: relative;
			width: 98px;
			margin: 0 0 12px 12px;
			.c-item-cover {
				display: none;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				height: 98px;
				z-index: 3;
				background: rgba(0, 0, 0, 0.5);
				transition: all 0.2s ease;
			}
			.iconfont {
				position: absolute;
				// right: 5px;
                left: 6px;
				color: $white;
				&.icon-uncheck {
					display: block;
				}
				&.icon-checked {
					display: none;
				}
			}
			&.selected {
				.icon-uncheck {
					display: none;
				}
				.icon-checked {
					display: block;
				}
				.c-item-cover {
					display: block;
				}
			}
			img {
				width: 98px;
				height: 98px;
				margin-bottom: 8px;
			}
			span {
				font-size: 12px;
				color: #515a6e;
				line-height: 1;
				text-align: center;
			}
		}
		.pager {
			display: flex;
			justify-content: space-between;
			align-items: center;
			/*flex-direction: row;
			justify-content: flex-end;*/
			width: 100%;
			/*height: 58px;*/
			background: #f8f8f9;
			overflow-x: scroll;
			border-bottom: 1px solid #dcdee2;
			margin-bottom: 10px;
		}
		.footer {
			width: 100%;
			height: 155px;
			display: flex;
			flex-direction: column;
			position: relative;
			border-bottom: 1px solid #dcdee2;
			.title {
				font-size: 12px;
				line-height: 24px;
				vertical-align: middle;
				text-align: start;
				color: #515a6e;
				margin-left: 12px;
			}
			.content {
				width: 100%;
				height: 90%;
				display: flex;
				flex-direction: row;
				overflow-x: auto;
				overflow-y: hidden;
			}
		}
	}
</style>
